<template>
  <h1 class="row-title">普通按钮</h1>
  <div class="row">
    <ct-button>默认按钮</ct-button>
    <ct-button type="primary">主要按钮</ct-button>
    <ct-button type="success">成功按钮</ct-button>
    <ct-button type="info">信息按钮</ct-button>
    <ct-button type="warning">警告按钮</ct-button>
    <ct-button type="error">错误按钮</ct-button>
  </div>
  <h1 class="row-title">朴素按钮</h1>
  <div class="row">
    <ct-button plain>默认按钮</ct-button>
    <ct-button type="primary" plain>主要按钮</ct-button>
    <ct-button type="success" plain>成功按钮</ct-button>
    <ct-button type="info" plain>信息按钮</ct-button>
    <ct-button type="warning" plain>警告按钮</ct-button>
    <ct-button type="error" plain>错误按钮</ct-button>
  </div>
  <h1 class="row-title">圆角按钮</h1>
  <div class="row">
    <ct-button round plain>默认按钮</ct-button>
    <ct-button type="primary" round plain>主要按钮</ct-button>
    <ct-button type="success" round plain>成功按钮</ct-button>
    <ct-button type="info" round plain>信息按钮</ct-button>
    <ct-button type="warning" round plain>警告按钮</ct-button>
    <ct-button type="error" round plain>错误按钮</ct-button>
  </div>
  <h1 class="row-title">按钮禁用</h1>
  <div class="row">
    <ct-button round plain disabled>默认按钮</ct-button>
    <ct-button type="primary" round plain disabled>主要按钮</ct-button>
    <ct-button type="success" round plain disabled>成功按钮</ct-button>
    <ct-button type="info" round plain disabled>信息按钮</ct-button>
    <ct-button type="warning" round plain disabled>警告按钮</ct-button>
    <ct-button type="error" round plain disabled>错误按钮</ct-button>
  </div>
  <h1 class="row-title">等待状态</h1>
  <div class="row">
    <ct-button round loading>默认按钮</ct-button>
    <ct-button type="primary" plain loading>主要按钮</ct-button>
    <ct-button type="success" loading>成功按钮</ct-button>
    <ct-button type="info" round plain>信息按钮</ct-button>
    <ct-button type="warning" round plain loading>警告按钮</ct-button>
    <ct-button type="error" round plain loading>错误按钮</ct-button>
  </div>
  <h1 class="row-title">自定义图标</h1>
  <div class="row">
    <ct-button round icon="plane">默认按钮</ct-button>
    <ct-button type="primary" plain icon="droplet">主要按钮</ct-button>
    <ct-button type="success" icon="fire">成功按钮</ct-button>
    <ct-button type="info" round plain icon="folder">信息按钮</ct-button>
    <ct-button type="warning" round plain loading icon="bath">警告按钮</ct-button>
    <ct-button type="error" plain icon="users">错误按钮</ct-button>
  </div>
  <h1 class="row-title">不同尺寸的按钮</h1>
  <div class="row">
    <ct-button icon="plane">默认按钮</ct-button>
    <ct-button type="primary" plain icon="droplet" size="small">主要按钮</ct-button>
    <ct-button type="success" icon="fire" size="medium">成功按钮</ct-button>
    <ct-button type="info" plain icon="folder" size="large">信息按钮</ct-button>
    <ct-button type="warning" plain icon="bath" size="huge">警告按钮</ct-button>
    <ct-button type="error" plain icon="users" size="giant">错误按钮</ct-button>
  </div>
  <h1 class="row-title">圆形按钮</h1>
  <div class="row">
    <ct-button icon="plane" circle />
    <ct-button type="primary" plain icon="droplet" size="small" circle />
    <ct-button type="success" icon="fire" size="medium" circle />
    <ct-button type="info" plain icon="folder" size="large" circle />
    <ct-button type="warning" plain icon="bath" size="huge" circle />
    <ct-button type="error" icon="users" circle />
  </div>
  <h1 class="row-title">按钮事件</h1>
  <div class="row">
    <ct-button ref="btnRef" type="primary" round plain @click="handlerClick">主要按钮</ct-button>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const btnRef = ref(null)
const handlerClick = () => {
  alert('按钮被点击了..')
  console.log(btnRef.value.ref)
}
</script>
<style lang="scss" scoped></style>
